<template>
	<view class="container">
		<view class="top_bar"
			:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px',paddingRight:navBarRight + 'px' }">
			首页
		</view>
		<view class="cont_box" :style="{ height: `calc(100vh - 75px - ${navBarHeight}px - ${navBarTop}px)` }">
			<view class="box_banner">
				<u--image src="https://ivu06wjqra.dy.takin.cc/human/ai/fd4fc0199dfc4886b41f66358334b73d.png"
					width='100%'  mode="widthFix"></u--image>
			</view>
			<view class="model_item">
				<view class="model" @click="creatvideofn">

					<view class="model_title">
						<view class="model_icon">
							<span class="iconfont icon-shipin1"></span>
						</view>
						<view class="">
							数字分身
						</view>
					</view>
					<view class="model_desc">
						上传视频，生成数字分身
					</view>
				</view>
				<view class="model" @click="creatimgfn">
					
					<view class="model_title">
						<view class="model_icon">
							<span class="iconfont icon-tupian"></span>
						</view>
						<view class="">
							画中活现
						</view>
					</view>
					<view class="model_desc">
						静态照片，生成数字视频
					</view>
				</view>
			</view>
			<view class="guide">
				数字人教程指南
			</view>
			<view class="guide_item">
				<view class="guide_item_one guide_public" @click="goprocessfn(3)">
					<view class="guide_video"
						style="background-image: url('https://ivu06wjqra.dy.takin.cc/human/process/2.png');">
					</view>
					<view class="guide_item">
						<view class="guide_title">
							视频生成数字人
						</view>
						<view class="guide_desc">
							通过上传视频方式生成数字人视频
						</view>
					</view>
				</view>
				<view class="guide_item_two guide_public" @click="goprocessfn(2)">
					<view class="guide_video"
						style="background-image: url('https://ivu06wjqra.dy.takin.cc/human/process/3.png');">
					</view>
					<view class="guide_item">
						<view class="guide_title">
							图片生成数字人
						</view>
						<view class="guide_desc">
							通过上传图片方式生成数字人视频
						</view>
					</view>
				</view>
				<!-- <view class="guide_item_three guide_public"  @click="goprocessfn(5)">
					<view class="guide_video" style="background-image: url('https://ivu06wjqra.dy.takin.cc/human/process/4.png');">
					</view>
					<view class="guide_item">
						<view class="guide_title">
							生成与导出
						</view>
						<view class="guide_desc">
							生成队列与数字人视频导出
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<layout />
	</view>
</template>

<script>
	import {
		judgetoken
	} from '../../utils/utils.js'
	import layout from '../../components/layout/layout.vue'
	export default {
		data() {
			return {
				navBarTop: 0,
				navBarLeft: 0,
				navBarHeight: 0,
			};
		},
		components: {
			layout
		},
		onload() {

		},
		mounted() {
			//获取胶囊位置
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;
			this.navBarLeft = menuButtonInfo.left;
			uni.$emit('update', {
				active: 2
			}) // 触发事件并传递参数	
		},
		watch: {

		},
		methods: {
			creatvideofn() {
				if (!judgetoken()) {
					return
				}
				uni.navigateTo({
					url: '/subpackage/creatvideo/creatvideopage',
				});
			},
			creatimgfn() {
				if (!judgetoken()) {
					return
				}
				uni.navigateTo({
					url: '/subpackage/creatvideo/creatimgpage',
				});
			},
			goprocessfn(e) {
				uni.navigateTo({
					url: '/subpackage/process/process?type=' + encodeURIComponent(e)
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	// 主题色彩变量
	$primary-color: #f94222;
	$primary-light: rgba(249, 66, 34, 0.05);
	$text-primary: #1f2937;
	$text-secondary: #6b7280;
	$text-tertiary: #9ca3af;
	$border-color: #e5e7eb;
	$border-radius: 16px;
	$border-radius-sm: 12px;
	$shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	$shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.1);

	.top_bar {
	font-size: 30rpx;
		text-align: center;
	}

	.container {
		// padding: 15px;
		// height: 100vh;
		background-color: #e0f7fd;
	}

	.cont_box {
		background-image: linear-gradient(to bottom, #e0f7fd, #effbfc, #fafefd, #fff, #fff,
			);
		padding: 5px 20px 10px;
		overflow: auto;
		// border-radius: $border-radius;
		box-shadow: $shadow;

		.box_banner {
			height: 225px;
			border-radius: $border-radius;
			overflow: hidden;
			box-shadow: $shadow;
			transition: transform 0.3s ease;



			::v-deep .u-image {
				height:225px !important;
				border-radius: $border-radius;
				object-fit: cover;
			}
			::v-deep .u-image__image{
				height: 225px !important;
			}
		}

		.model_item {
			margin-top: 15px;
			display: flex;
			justify-content: space-between;
			gap: 16px;

			.model {
				// height: 65px;
				/* 增加高度，提供更好的视觉平衡 */
				width: 49%;
				border-radius: $border-radius;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				tap-highlight-color: transparent;
				/* 移除默认点击高亮 */
				position: relative;
				box-shadow: $shadow;
				overflow: hidden;
				padding:10px 10px;

				/* 不同卡片使用不同渐变背景 */
				&:nth-child(1) {
					background: linear-gradient(135deg, #f9422215, #f9422225);
					border: 1px solid #f9422220;
				}

				&:nth-child(2) {
					background: linear-gradient(135deg, #3b82f615, #3b82f625);
					border: 1px solid #3b82f620;
				}

				/* 添加装饰元素 */
				&::after {
					content: '';
					position: absolute;
					bottom: -20px;
					right: -20px;
					height: 80px;
					width: 80px;
					border-radius: 50%;
					opacity: 0.15;
					z-index: 0;
				}

				&:nth-child(1)::after {
					background: radial-gradient(circle, $primary-color, transparent 70%);
				}

				&:nth-child(2)::after {
					background: radial-gradient(circle, #3b82f6, transparent 70%);
				}

				.model_icon {
					height: 30px;
					width: 30px;
					border-radius: 50%;
					// background-color: #fff;
					text-align: center;
					line-height: 30px;
					// box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
					position: relative;
					z-index: 1;

					.iconfont {
						font-size: 40rpx;
						// font-weight: 600;
					}

					/* 不同卡片图标使用不同颜色 */
					.icon-shipin1 {
						color: $primary-color;
					}

					.icon-tupian {

						color: #3b82f6;
					}

				}

				.model_title {
					margin:0px 0 3px;
					font-size: 36rpx;
					/* 增加字号提升可读性 */
					font-weight: 700;
					color: $text-primary;
					letter-spacing: 0.5px;
					position: relative;
					z-index: 1;
					display: flex;
					align-items: center;
				}

				.model_desc {
					font-size: 25rpx;
					color: $text-secondary;
					text-align: center;
					line-height: 1.5;
					position: relative;
					z-index: 1;
					font-weight: 450;
				}
			}
		}

		.guide {
			margin: 15px 0 10px;
			font-size: 36rpx;
			font-weight: 700;
			color: $text-primary;
			letter-spacing: 0.5px;
			position: relative;
			padding-left: 12px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 60%;
				width: 4px;
				background-color: $primary-color;
				border-radius: 2px;
			}
		}

		.guide_item {
			.guide_public {
				height: 90px;
				padding:5px 16px;
				margin-bottom: 14px;
				border-radius: $border-radius;
				display: flex;
				align-items: center;
				cursor: pointer;
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;
				box-shadow: $shadow;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
					transition: all 0.6s ease;
				}


				.guide_video {
					height: 60px;
					width: 110px;
					margin-right: 16px;
					border-radius: $border-radius-sm;
					background-color: rgba(0, 0, 0, 0.1);
					background-size: cover;
					background-position: center;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						background-color: rgba(255, 255, 255, 0.9);
						height: 28px;
						width: 28px;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.iconfont {
							color: $primary-color;
							padding-left: 3px;
						}
					}

					// &::after {
					// 	content: '';
					// 	position: absolute;
					// 	top: 50%;
					// 	left: 50%;
					// 	transform: translate(-50%, -50%);
					// 	height: 28px;
					// 	width: 28px;
					// 	border-radius: 50%;
					// 	background-color: rgba(255, 255, 255, 0.9);
					// 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
					// }

					// &::before {
					// 	content: '▶';
					// 	position: absolute;
					// 	top: 50%;
					// 	left: 51%;
					// 	transform: translate(-50%, -50%);
					// 	font-size: 16px;
					// 	color: $primary-color;
					// 	z-index: 1;
					// 	font-weight: bold;
					// }
				}

				.guide_item {
					flex: 1;

					.guide_title {
						margin: 0 0 6px;
						font-size: 32rpx;
						font-weight: 700;
						color: $text-primary;
						line-height: 1.3;
					}

					.guide_desc {
						font-size: 26rpx;
						color: $text-secondary;
						line-height: 1.4;
					}
				}
			}

			.guide_item_one {
				background-image: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe);

				.guide_video {
					background-color: rgba(59, 130, 246, 0.1);
				}
			}

			.guide_item_two {
				background-image: linear-gradient(135deg, #f0fdfa, #ccfbfc, #a5f3fc);

				.guide_video {
					background-color: rgba(16, 185, 129, 0.1);
				}
			}

			.guide_item_three {
				background-image: linear-gradient(135deg, #fef3c7, #fde68a, #fcd34d);

				.guide_video {
					background-color: rgba(245, 158, 11, 0.1);
				}
			}
		}
	}
</style>